<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { useGetRegisterCodeList } from '@/services/pages/code'
  import { TableInstance } from 'element-plus'
  import { nextTick, PropType, ref } from 'vue'
  import { Good } from '../../types'

  const {
    registeredCodeList,
    registeredCodeListTotal,
    getRegisterCodeListLoading,
    getRegisteredCodeListParam,
    getRegisterCodeList,
  } = useGetRegisterCodeList()

  defineOptions({
    name: 'CreateRepairSnCodeList',
  })

  const props = defineProps({
    getListParam: {
      type: Object as PropType<typeof getRegisteredCodeListParam.value>,
      required: true,
    },
    userId: {
      type: String,
      required: true,
    },
    selectedList: {
      type: Array as PropType<Array<Good>>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'select-sn-code', value: Array<CodeRegisteredCodeList>): void
  }>()

  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)
  const tableInstance = ref<TableInstance | null>(null)

  const getList = () => {
    getRegisteredCodeListParam.value = props.getListParam
    nextTick(async () => {
      if (paginationInstance.value) {
        getRegisteredCodeListParam.value.page = paginationInstance.value.current
        getRegisteredCodeListParam.value.limit = paginationInstance.value.size
        await getRegisterCodeList(props.userId)

        tableInstance.value && tableInstance.value.clearSelection()
        if (registeredCodeList.value) {
          props.selectedList.forEach((selectedGood) => {
            registeredCodeList.value.forEach((snCode) => {
              if (
                selectedGood.goodId === snCode.goodsId &&
                selectedGood.goodSpecId === snCode.goodsSpecId &&
                selectedGood.snCode === snCode.code
              ) {
                tableInstance.value && tableInstance.value.toggleRowSelection(snCode, true)
              }
            })
          })
        }
      }
    })
  }

  const handleTableSelectionChange = (data: Array<CodeRegisteredCodeList>) => {
    emits('select-sn-code', data)
  }

  defineExpose({
    getListLoading: getRegisterCodeListLoading,
    getList,
  })
</script>

<template>
  <div class="create-repair-sn-code-list">
    <div class="table">
      <el-table
        ref="tableInstance"
        :border="true"
        stripe
        :data="registeredCodeList"
        height="100%"
        @selection-change="handleTableSelectionChange"
      >
        <!-- 选择 -->
        <el-table-column type="selection" width="50" fixed :align="'center'" />

        <!-- 序号 -->
        <el-table-column type="index" width="50" fixed label="序号" :align="'center'" />

        <!-- 条码 -->
        <el-table-column show-overflow-tooltip prop="code" width="180" label="条码" />

        <!-- 产品编号 -->
        <el-table-column show-overflow-tooltip prop="goodsCode" width="100" label="产品编号" />

        <!-- 品牌 -->
        <el-table-column show-overflow-tooltip prop="goodsBrand" width="100" label="品牌" />

        <!-- 名称 -->
        <el-table-column show-overflow-tooltip prop="goodsName" width="180" label="名称" />

        <!-- 型号 -->
        <el-table-column show-overflow-tooltip prop="goodsModel" width="120" label="型号" />

        <!-- 规格 -->
        <el-table-column show-overflow-tooltip prop="goodsSpecName" width="160" label="规格" />

        <!-- 类型 -->
        <el-table-column show-overflow-tooltip prop="goodsType" width="100" label="类型" />

        <!-- 地址 -->
        <el-table-column show-overflow-tooltip label="地址" width="220">
          <template #default="{ row }">
            {{ `${row.province}   ${row.city}  ${row.area}  ${row.town}  ${row.address}` }}
          </template>
        </el-table-column>

        <!-- 质保时间(天) -->
        <el-table-column prop="warrantyDay" label="质保时间(天)" width="140" />

        <!-- 质保开始 -->
        <el-table-column prop="warrantyStartTime" label="质保开始" width="140" />

        <!-- 质保截止 -->
        <el-table-column prop="warrantyEndTime" label="质保截止" width="140" />
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="paginationInstance"
        :list_total="registeredCodeListTotal"
        @size-change="getList"
        @page-change="getList"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .create-repair-sn-code-list {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    height: 99%;

    .table {
      max-height: calc(100% - 28px - 8px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
